<template>
	<view>
		<view class='flex flex-direction flex-wrap align-stretch' style="margin-top: 32rpx;"
			v-if="datum.length>0 && isup">
			<template v-for='(item,key0) in datum'>
				
				
				<!--mp4  -->
				<view class='flex flex-wrap align-center justify-between instructioning_fd2_5_c0'
					v-if="item.file_type==2" :key='key0'>
					<view class='flex flex-wrap align-center'>
						<image class='instructioning_fd2_5_c0_c0_c0' mode="aspectFit" :src='STATIC_URL+"k1.png"'>
						</image>
						<text class='instructioning_fd2_5_c0_c0_c1'>{{item.resource_name}}</text>
						<!-- .mp4 -->
					</view>
					<button class='instructioning_fd2_5_c0_c1'
						@tap.stop="mixinToPlayVideo(item.file_path)">{{$t('查看')}}</button>
				</view>
				<view class='flex flex-wrap align-center justify-between instructioning_fd2_5_c0'
					v-else :key='key0'>
					<view class='flex flex-wrap align-center'>
						<!-- item.file_type =  hz=='png'?1:hz=='xlsx'?3:hz == 'mp4' ? 2 : hz == 'pdf' ? 4 : hz == 'ppt' ? 5 : hz == 'docx' ?6 : hz == 'mp3' ?7:'' -->
						<image class='instructioning_fd2_5_c0_c0_c0' mode="aspectFit" :src='item.file_type==1?STATIC_URL+"png.png":item.file_type==3?STATIC_URL+"bg.png":item.file_type==4?STATIC_URL+"pdf.png":item.file_type==5?STATIC_URL+"ppt.png":item.file_type==6?STATIC_URL+"word.png":STATIC_URL+"word.png"'>
						</image>
						<!-- <text class='instructioning_fd2_5_c0_c0_c1'>{{item.resource_name}}.{{item.fileType}}</text> -->
						<text class='instructioning_fd2_5_c0_c0_c1'>{{item.resource_name}}</text>
					</view>
					<button class='instructioning_fd2_5_c0_c1'
						@tap.stop="seePdf(item.resource_file_path,item.resource_id,item)">{{$t('查看')}}</button>
				</view>

				<!-- pdf -->
			<!-- 	<view class='flex flex-wrap align-center justify-between instructioning_fd2_5_c0'
					v-if="item.file_type==5" :key='key0'>
					<view class='flex flex-wrap align-center'>
						<image class='instructioning_fd2_5_c0_c0_c0' mode="aspectFit" :src='STATIC_URL+"k2.png"'>
						</image>
						<text class='instructioning_fd2_5_c0_c0_c1'>{{item.resource_name}}.pdf</text>
					</view>
					<button class='instructioning_fd2_5_c0_c1'
						@tap="seePdf(item.resource_file_path,item.resource_id,item)">{{$t('查看')}}</button>
				</view> -->

				<!-- ppt -->
		<!-- 		<view class='flex flex-wrap align-center justify-between instructioning_fd2_5_c0'
					v-if="item.file_type==4" :key='key0'>
					<view class='flex flex-wrap align-center'>
						<image class='instructioning_fd2_5_c0_c0_c0' mode="aspectFit" :src='STATIC_URL+"k3.png"'>
						</image>
						<text class='instructioning_fd2_5_c2_c0_c1'>{{item.resource_name}}.ppt</text>
					</view>
					<button class='instructioning_fd2_5_c0_c1'
						@tap="seePdf(item.file_path,item.aid,item)">{{$t('查看')}}</button>
				</view> -->

				<!-- 文档 -->
			<!-- 	<view class='flex flex-wrap align-center justify-between instructioning_fd2_5_c0'
					v-if="item.file_type==7" :key='key0'>
					<view class='flex flex-wrap align-center'>
						<image class='instructioning_fd2_5_c0_c0_c0' mode="aspectFit" :src='STATIC_URL+"k4.png"'>
						</image>
						<text class='instructioning_fd2_5_c2_c0_c1'>{{item.resource_name}}.doc</text>
					</view>
					<button class='instructioning_fd2_5_c0_c1'
						@tap="seePdf(item.file_path,item.aid,item)">{{$t('查看')}}</button>
				</view> -->

				<!-- 图片 -->
			<!-- 	<view class='flex flex-wrap align-center justify-between instructioning_fd2_5_c0'
					v-if="item.file_type==1" :key='key0'>
					<view class='flex flex-wrap align-center'>
						<image class='instructioning_fd2_5_c0_c0_c0' mode="aspectFit" :src='STATIC_URL+"k5.png"'>
						</image>
						<text class='instructioning_fd2_5_c0_c0_c1'>{{item.resource_name}}.png</text>
					</view>
					<button class='instructioning_fd2_5_c0_c1'
						@tap="seePdf(item.file_path,item.aid,item)">{{$t('查看')}}</button>
				</view> -->
			</template>
		</view>
		<view v-if="datum.length==0 && isup">
			<slot>
				<view class="public-page-empty">
					<image src='/static/global/order.png'></image>
					<view class="txt">暂无数据</view>
				</view>
			</slot>
		</view>
		<!-- <view v-if="group==2"
			class="flex flex-direction flex-wrap align-center justify-center benben-position-layout flex list_flex_3_ibhf">
			<button class='list_fd3_0_ibhf'>添加学习资料</button>

		</view> -->
		<view :style="{height: '88rpx'}"></view>
	</view>
</template>

<script>
	import filePreview from '@/common/utils/filePreview.js'
	export default {
		mixins: [filePreview],
		data() {
			return {
				isup: false,
				datum: [],
				course: '',
				group: 0,
			};
		},
		onLoad(option) {
			this.course = option.course
			this.getim68f99801dcf8Func()
		},
		onShow() {
			this.group = uni.getStorageSync('USER_GROUP');
		},
		methods: {
			//备课管理-获取课件列表
			async getim68f99801dcf8Func() {

				//请求方法
				//数据验证
				let url = ''
				if (uni.getStorageSync('USER_GROUP') == 1) {
					url = global.apiUrls.post68cbb2c2b9442
				} else {
					url = global.apiUrls.post68c3989022b95
				}
				let datadatum = await this.$api.get(global.apiUrls.post68cbb2c2b9442, {
					course_id: this.course
				});
				this.isup = true
				if (datadatum.data.code != 1) {
					this.$message.info(datadatum.data.msg);
					return
				}
				let infodatum = datadatum.data;
				console.log(infodatum.data)
				this.datum = infodatum.data.map(item => {
					item.fileType = item.file_path.slice(item.file_path.lastIndexOf('.'))
					let hz = item.fileType.split('.')[1]
					item.fileType=hz
					item.file_type =  hz=='png'?1:hz=='xlsx'?3:hz == 'mp4' ? 2 : hz == 'pdf' ? 4 : hz == 'ppt' ? 5 : hz == 'docx' ?6 : hz == 'mp3' ?7: hz == 'pptx' ? 5:''
					return item
				})
				console.log(this.datum)

			},
			seePdf(file, aid, item) {
				console.log('vvvvvvvvvvvvvv', item);
				let _this = this;
				let id = aid;
				let url = file;
				// console.log(item.fileType )
				console.log(item.file_path)
				// let name=item.resource_name+'.'+item.fileType
				let name=item.resource_name
				console.log(name)
				
				this.previewFile(item.file_path, name)
				return
				// #ifdef APP-PLUS

				let files = uni.getStorageSync('files') ? JSON.parse(uni.getStorageSync('files')) : {}
				console.log(files)
				if (files[id]) {
					plus.runtime.openFile(files[id], {}, (res) => {
						console.log("res=>", res);
					})
				} else {
					downloadFile()
				}

				function downloadFile() {
					uni.showLoading({
						title: '加载中'
					})
					const dtask = plus.downloader.createDownload(url, {}, function(d, status) {
						if (status == 200) {
							console.log('保存成功')
							uni.hideLoading();
							files[id] = d.filename
							uni.setStorageSync('files', JSON.stringify(files))
							plus.runtime.openFile(d.filename)
						} else {
							plus.downloader.clear()
							uni.hideLoading();
							uni.showToast({
								title: '文档加载失败，请稍后再试',
								icon: 'none',
							})
						}
					})
					dtask.start()
				}
				// #endif

				// #ifdef H5
				window.open(url)
				// #endif
			},

		}
	}
</script>

<style lang="scss">
	.instructioning_fd2_5_c0_c1 {
		background: rgba(20, 94, 253, .1);
		border-radius: 33rpx 33rpx 33rpx 33rpx;
		width: 96rpx;
		line-height: 48rpx;
		font-size: 24rpx;
		color: rgba(20, 94, 253, 1);
	}

	.instructioning_fd2_5_c0_c0_c1 {
		color: #333;
		font-size: 28rpx;
		font-weight: 500;
		line-height: 40rpx;
		width: 430rpx;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.instructioning_fd2_5_c0_c0_c0 {
		width: 40rpx;
		height: 40rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin: 0rpx 016rpx 0rpx 0rpx;
	}

	.instructioning_fd2_5_c0 {
		background: #FFFFFF;
		padding: 32rpx 24rpx 024rpx 24rpx;
		margin: 0rpx 24rpx 24rpx 24rpx;
		border-radius: 32rpx;
		background-size: 100% auto;
		height: 104rpx;
	}

	.list_flex_3_ibhf {
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		bottom: calc(88rpx + var(--window-bottom));

		.list_fd3_0_ibhf {
			border-radius: 12rpx;
			width: 702rpx;
			line-height: 84rpx;
			font-size: 24rpx;
			background: #145EFD;
			color: #fff;
			height: 84rpx;
		}
	}

	.public-page-empty {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		padding: 120upx 0 0 0;

		image {
			width: 300rpx;
			height: 300rpx;
		}

		.txt {
			font-size: 28upx;
			color: $uni-text-color;
			text-align: center;
			line-height: 100upx;
			color: var(--benben-loading-color, #999999);
		}

		.loadTips {
			line-height: 30upx;
		}

		.btn {
			width: 260upx;
			height: 78upx;
			line-height: 78upx;
			background: linear-gradient(309deg, rgba(254, 49, 0, 1) 0%, rgba(255, 90, 16, 1) 100%);
			opacity: 1;
			border-radius: 44upx;
			font-size: 28upx;
			color: #fff;
			text-align: center;
			margin-top: 100upx;
		}
	}
	.public-page-empty {
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			padding: 120upx 0 0 0;
		
			image {
				width: 300rpx;
				height: 300rpx;
			}
		
			.txt {
				font-size: 28upx;
				color: $uni-text-color;
				text-align: center;
				line-height: 100upx;
				color: var(--benben-loading-color, #999999);
			}
		
			.loadTips {
				line-height: 30upx;
			}
		
			.btn {
				width: 260upx;
				height: 78upx;
				line-height: 78upx;
				background: linear-gradient(309deg, rgba(254, 49, 0, 1) 0%, rgba(255, 90, 16, 1) 100%);
				opacity: 1;
				border-radius: 44upx;
				font-size: 28upx;
				color: #fff;
				text-align: center;
				margin-top: 100upx;
			}
		}
	
	
</style>
